<template>
	<view class="shortlist">
		<view v-for="(item, index) in list" class="content" :key="index" v-if="isTop(index)" @click="clickItem(item,index)">
			<view class="imagebox">
				<image class="image" :src="item.cover || defaultImg" mode="aspectFill" lazy-load></image>
				<uni-icons custom-prefix="iconfont" type="icon-play1" color="#fff" class="icon" size="40"></uni-icons>
			</view>
			<view class="info">
				<view class="">
					<text class="title">{{ item.Name }}</text>
					<text class="msg">{{ formattedDate(item.DateCreated) }}</text>
				</view>
				<view class="video-desc">
					<text class="msg">{{ formattedTime(item.RunTimeTicks) }}</text>
					<text class="msg">{{ formattedSize(item.Size) }}</text>
					<text class="msg">{{ formattedRes(item.Width,item.Height) }}</text>
				</view>
				<view class="video-desc">
					<text v-for="(item1, index1) in item.TagItems" :key="index1" class="msg tag-tip">{{ item1.Name }}</text>
				</view>
			</view>
		</view>
		<nothing v-if="list.length == 0" :msg="msg" />
	</view>
</template>

<script>
	import nothing from '@/components/nothing.vue'
	import {
		videoDataFormatter
	} from "@/common/videoDataFormatter.js"; // 导入工具函数
	export default {
		name: 'list',
		props: {
			list: {
				type: Array,
				default: []
			},
			top: {
				type: Number,
				default: 6
			},
			msg: {
				type: String,
				default: "Fly Beyond the Milky Way Galaxy"
			}
		},
		components: {
			nothing
		},
		data() {
			return {
				defaultImg: require("@/static/FileStation.png"), // 默认图片（本地资源必须用 require）
			};
		},
		methods: {
			// 1. 处理后的时长
			formattedTime(runTimeTicks) {
				return videoDataFormatter.formatRunTime(runTimeTicks);
			},
			// 2. 处理后的视频大小
			formattedSize(videoSize) {
				return videoDataFormatter.formatVideoSize(videoSize);
			},
			// 3. 处理后的分辨率
			formattedRes(videoWidth, videoHeight) {
				return videoDataFormatter.formatResolution(
					videoWidth,
					videoHeight
				);
			},
			formattedDate(dateCreated) {
				return videoDataFormatter.formatDate(dateCreated, 'YYYY-MM-DD');
			},
			handleImageError(e) {
				// 当图片加载失败时，将src属性设置为默认图片的路径
				// 防止循环触发 error 事件（关键！）
				if (e.target.src !== this.defaultImg) {
					e.target.src = this.defaultImg;
					e.currentTarget.src = this.defaultImg;
					console.log("加载默认图片" + e.target.src)
				}
			},
			isTop(index) {
				if (this.top === 0) {
					return true
				} else {
					return index < this.top
				}
			},
			clickItem(item, index) {
				// #ifdef APP
				if (item.Type == "Movie") {
					this.$store.dispatch('saveLargeList', {data:this.list, index})
					uni.navigateTo({
						url: `/pages/player/app/short`
					})
				}else{
					uni.navigateTo({
						url: `/pages/player/app/series?id=${item.Id}&Type=${item.Type}`
					})
				}
				// #endif
				// #ifndef APP
				if (item.Type == "Movie") {
					this.$store.dispatch('saveLargeList', {data:this.list, index})
					uni.navigateTo({
						url: '/pages/player/web/short'
					})
				}else{
					uni.navigateTo({
						url: `/pages/player/web/series?id=${item.Id}&Type=${item.Type}`
					})
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shortlist {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
		justify-content: space-around;

		.imagebox {
			position: relative;
			height: 182px;
			width: 135px;
			margin: 6px 0;

			.icon {
				position: absolute;
				top: 35%;
				left: 40%;
			}
		}
	}

	.content {
		display: flex;
		padding: 8px;
		flex-flow: column;
		text-align: center;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}

	.content:hover {
		transform: translateY(-4px);
	}

	.content .image {
		// width: 200rpx;
		// height: 280rpx;
		margin-right: 10px;
		border-radius: 5px;
		box-shadow: 2px 2px 6px #333;
		background-image: url('@/static/FileStation.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: initial;
		width: 100%;
		height: 180px;
		object-fit: cover;
		border-radius: 4px;
	}

	.content .title {
		font-size: 0.6rem;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		margin: 0 0 10px 0;
		text-align: start;
	}

	.content .msg {
		font-size: 0.8rem;
		color: #888;
		display: block;
	}

	.content .info {
		width: 135px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.content .video-desc {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.content .text-original {
	    color: #e80080;
	}
	
	.content .tag-tip {
	    background-color: hsl(116, 41.7%, 50.2%);
	    color: #ffffff;
	    padding: 0 5px;
	    border-radius: 2px;
	}

	.buttonbox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 10px;
	}

	.buttonbox .season {}

	.buttonbox .playnow {
		font-size: 0.8rem;
		background-color: #2b2b2b;
		border-radius: 20px;
		padding: 3px 10px;
	}

	.playnow .icon {
		margin-right: 3px;
	}

	.ellip {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/* degradation */
		height: 52px;
		overflow: hidden;
	}

	/* 响应式调整：根据屏幕宽度修改列数 */
	/* 屏幕 >= 576px（手机横屏/小平板）：2列 */
	@media (min-width: 576px) {
		.shortlist {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* 屏幕 >= 768px（平板）：3列 */
	@media (min-width: 768px) {
		.shortlist {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* 屏幕 >= 992px（桌面）：4列 */
	@media (min-width: 992px) {
		.shortlist {
			grid-template-columns: repeat(4, 1fr);
		}
	}
</style>